<template>
  <div class="salSob">
    <div class="salaryHandle">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="showSalaryAddView"
          >添加工资账套</el-button
        >
        <el-button type="success" icon="el-icon-refresh" @click="initSalaries"
          >刷新</el-button
        >
      </div>
    </div>
    <div>
      <el-table :data="salaries" border stripe style="width: 100%">
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column prop="name" label="账套名称"></el-table-column>
        <el-table-column prop="basicSalary" label="基本工资"></el-table-column>
        <el-table-column
          prop="trafficSalary"
          label="交通补助"
        ></el-table-column>
        <el-table-column prop="lunchSalary" label="午餐补助"></el-table-column>
        <el-table-column prop="bonus" label="奖金"> </el-table-column>
        <el-table-column prop="createDate" label="启用时间"> </el-table-column>
        <el-table-column label="养老金">
          <el-table-column prop="pensionBase" label="基数"> </el-table-column>
          <el-table-column prop="pensionPer" label="比率"> </el-table-column>
        </el-table-column>
        <el-table-column label="公积金">
          <el-table-column prop="accumulationFundBase" label="基数">
          </el-table-column>
          <el-table-column prop="accumulationFundPer" label="比率">
          </el-table-column>
        </el-table-column>
        <el-table-column label="医疗保险">
          <el-table-column prop="medicalBase" label="基数"> </el-table-column>
          <el-table-column prop="medicalPer" label="比率"> </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="medium" @click="showEditSalaryView(scope.row)"
              >编辑
            </el-button>
            <el-button
              size="medium"
              type="danger"
              @click="doSalaryDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="salaryAddFormVisible"
      width="60%"
    >
      <div class="updateDialogInfo">
        <el-steps :active="activeItemIndex">
          <el-step
            :title="itemName"
            v-for="(itemName, index) in salaryItemName"
            :key="index"
          ></el-step>
        </el-steps>
        <!--          <el-input-->
        <!--                  v-for="(value, title, index) in salary"-->
        <!--                  :key="index"-->
        <!--                  :v-model="salary[title]"-->
        <!--                  :placeholder="'请输入' + salaryItemName[index] + '......'"-->
        <!--                  v-show="activeItemIndex == index"-->
        <!--                  class="addSalaryDialogInput"-->
        <!--          ></el-input>-->
        <div>
          <el-input
            v-for="(value, title, index) in salary"
            v-model="salary[title]"
            :key="index"
            v-show="activeItemIndex === index"
            :placeholder="'请输入' + salaryItemName[index] + '......'"
            class="addSalaryDialogInput"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="preStepSalary" v-if="activeItemIndex > 0"
          >上一步</el-button
        >
        <el-button
          type="primary"
          @click="nextStepAddSalary"
          v-if="dialogTitle === '添加公司账套'"
          >{{ activeItemIndex === 10 ? "提 交" : "下 一 步" }}</el-button
        >
        <el-button
          type="primary"
          @click="nextStepEditSalary"
          v-if="dialogTitle === '编辑公司账套'"
          >{{ activeItemIndex === 10 ? "确 定" : "下 一 步" }}</el-button
        >
        <!--        <el-button @click="salaryAddFormVisible = false">取 消</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SalSob",
  data() {
    return {
      salaries: {},
      salary: {
        name: null,
        basicSalary: null,
        trafficSalary: null,
        lunchSalary: null,
        bonus: null,
        pensionPer: null,
        pensionBase: null,
        medicalPer: null,
        medicalBase: null,
        accumulationFundPer: null,
        accumulationFundBase: null
      },
      salaryItemName: [
        "账套名称",
        "基本工资",
        "交通补助",
        "午餐补助",
        "奖金",
        "养老金比率",
        "养老金基数",
        "医疗保险比率",
        "医疗保险基数",
        "公积金比率",
        "公积金基数"
      ],
      dialogTitle: "",
      activeItemIndex: 0,
      salaryAddFormVisible: false
    };
  },
  mounted() {
    this.initSalaries();
  },
  methods: {
    //初始账套信息
    initSalaries() {
      this.getRequest("/salary/sob/")
        .then(resp => {
          if (resp) {
            this.salaries = resp;
          }
        })
        .catch(() => {});
    },
    //添加账套弹窗
    showSalaryAddView() {
      this.dialogTitle = "添加公司账套";
      this.salaryAddFormVisible = true;
      this.activeItemIndex = 0;
    },
    //上一步
    preStepSalary() {
      this.activeItemIndex--;
    },
    //下一步--添加
    nextStepAddSalary() {
      if (this.activeItemIndex === 10) {
        this.doSalaryAdd();
        return;
      }
      this.activeItemIndex++;
    },
    //下一步--更新
    nextStepEditSalary() {
      if (this.activeItemIndex === 10) {
        this.doSalaryUpdate();
        return;
      }
      this.activeItemIndex++;
    },
    doSalaryAdd() {
      this.postRequest("/salary/sob/", this.salary).then(resp => {
        if (resp) {
          this.salaryAddFormVisible = false;
          this.salaries.push(this.salary);
          this.salary = {
            name: null,
            basicSalary: null,
            trafficSalary: null,
            lunchSalary: null,
            bonus: null,
            pensionPer: null,
            pensionBase: null,
            medicalPer: null,
            medicalBase: null,
            accumulationFundPer: null,
            accumulationFundBase: null
          };
        }
      });
    },
    //删除工资账套
    doSalaryDelete(data) {
      console.log(data);
      this.$confirm("此操作将永久删除 [" + data.name + "] ,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "waring"
      }).then(() => {
        this.deleteRequest("/salary/sob/" + data.id).then(resp => {
          if (resp) {
            let index = this.salaries.indexOf(data);
            if (index > -1) {
              this.salaries.splice(index, 1);
            }
          }
        });
      });
    },
    //编辑公司账套
    showEditSalaryView(data) {
      console.log(data);
      this.dialogTitle = "编辑公司账套";
      this.salaryAddFormVisible = true;
      this.salary = {
        name: data.name,
        basicSalary: data.basicSalary,
        trafficSalary: data.trafficSalary,
        lunchSalary: data.lunchSalary,
        bonus: data.bonus,
        pensionPer: data.pensionPer,
        pensionBase: data.pensionBase,
        medicalPer: data.medicalPer,
        medicalBase: data.medicalBase,
        accumulationFundPer: data.accumulationFundPer,
        accumulationFundBase: data.accumulationFundBase,
        id: data.id
      };
      this.activeItemIndex = 0;
    },
    //更新方法
    doSalaryUpdate() {
      this.putRequest("/salary/sob/", this.salary).then(resp => {
        if (resp) {
          this.salaryAddFormVisible = false;
          this.initSalaries();
          this.salary = {
            name: null,
            basicSalary: null,
            trafficSalary: null,
            lunchSalary: null,
            bonus: null,
            pensionPer: null,
            pensionBase: null,
            medicalPer: null,
            medicalBase: null,
            accumulationFundPer: null,
            accumulationFundBase: null
          };
        }
      });
    }
  }
};
</script>

<style>
.salSob .salaryHandle {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
.salSob .addSalaryDialogInput {
  width: 500px;
  margin: 50px 0 0 50px;
}
</style>
